<template>
	<view>
		<view>
			<view style="font-weight: 600;text-align: center;margin-top: 20rpx;">
				{{topicTitle}}
			</view>
			<form @submit="formSubmit" @reset="formReset">
				<!-- 在此进行循环 -->
				<view class="uni-form-item uni-column" v-for="(item,index) in testList" :key="item.id">
					<view class="title">{{(index+1) + '.' + item.questionName}}({{item.answers.length<=1?'单选':'多选'}})
					</view>
					<!-- 在 radio-group 中进行题目类型判断  -->
					<radio-group :name="item.questionName" v-if="item.answers.length<=1">
						<!-- 每一项答案 -->
						<view class="test-item" v-for="(item2,index2) in item.options" :key="item2.id">
							<label>
								<radio :value="optionList[index2]" /><text>{{item2.optionContent}}</text>
							</label>
						</view>
					</radio-group>
					<!-- 在 checkbox-group 进行 else -->
					<checkbox-group :name="item.questionName" v-else>
						<view class="test-item" v-for="(item2,index2) in item.options" :key="item2.id">
							<label>
								<checkbox :value="optionList[index2]" /><text>{{item2.optionContent}}</text>
							</label>
						</view>
					</checkbox-group>
				</view>
				<view class="uni-btn-v">
					<button form-type="submit" type="primary" class="btn">提交</button>
					<button type="default" @click="goBack">取消</button>
				</view>
			</form>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<text class="text">得分: {{score}}分 / 总分: 10分</text>
					<view class="toAnalysis">
						<button type="primary" @click="toPage('analysis')">答案解析</button>
						<button @click="toPage('home')">返回首页</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				testList: [],
				optionList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M'],
				score: 0,
				subjectCode: '',
				length: 1,
				topicTitle: ''
			}
		},
		async onLoad(option) {
			this.subjectCode = option.subjectCode
			this.topicTitle = option.topicTitle
			const r = await uni.$http.get(`/api/question/queryBySubjectCode/${this.subjectCode}`)
			this.testList = r.data.data
			this.length = r.data.data.length
		},
		methods: {
			async formSubmit(result) {
				//校验
				const solution = result.detail.value
				if (!Object.values(solution).every(item => item.length !== 0)) {
					return uni.$showToast('选项不能为空')
				}
				this.testResult(solution)
				const list = []
				if (this.length === 1) {
					list.push({
						answer: this.typeJudgment(solution[this.testList[0].questionName]),
						questionCode: this.testList[0].options[0].questionCode
					})
				} else if (this.length === 2) {
					list.push({
						answer: this.typeJudgment(solution[this.testList[0].questionName]),
						questionCode: this.testList[0].options[0].questionCode
					}, {
						answer: this.typeJudgment(solution[this.testList[1].questionName]),
						questionCode: this.testList[1].options[0].questionCode
					})
				}
				const r = await uni.$http.post('/api/subject/result/updateSubjectResult', {
					"reqDtos": list,
					"score": this.score,
					"subjectCode": this.subjectCode,
				})
				this.toggle('center')
			},
			typeJudgment(str) {
				return Array.isArray(str) ? str + '' : str
			},
			testResult(value) {
				Object.keys(value).forEach(item => {
					//循环答案
					this.testList.forEach(item2 => {
						//找到对应题目
						if (item2.questionName === item) {
							//判断题目类型
							if (item2.answers.length === 1) {
								//单选
								value[item] === item2.answers[0] ? this.score = this.score +
									5 : ''
							} else {
								//多选
								this.arrayEqual(value[item], item2.answers) ? this.score = this
									.score + 5 :
									''
							}
						}
					})
				})
			},
			//判断两数组是否相等
			arrayEqual(result, answers) {
				if (result.length !== answers.length) return false
				return result.every(item => answers.some(item2 => item === item2))
			},
			goBack() {
				uni.navigateBack()
			},
			toggle(type) {
				this.type = type
				this.$refs.popup.open(type)
			},
			toPage(page) {
				if (page === 'analysis') {
					wx.navigateTo({
						url: `/subpkg/analysis/analysis?subjectCode=${this.subjectCode}&delta=${2}`
					})
				} else {
					wx.switchTab({
						url: '/pages/lecture/lecture'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.uni-form-item {
		.title {
			margin: 30rpx 0;
		}

		.test-item {
			margin: 20rpx 0;
		}

		radio-group {
			padding: 0 20rpx;
		}
	}

	.uni-btn-v {
		display: flex;
		justify-content: center;

		.btn {
			background-color: #3FBEBB;
			color: #fff;
		}
	}

	.popup-content {
		height: 500rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		text {
			font-size: 40rpx;
			font-weight: 700;
			padding: 40rpx;
		}

		.toAnalysis {
			display: flex;
			justify-content: space-evenly;
			padding: 30rpx;

			button {
				margin-right: 20rpx;
			}
		}
	}
</style>
